<template>
  <div class="fa-check-group-fill">
    <ElCheckbox
      v-for="item in options"
      :key="item.key"
      :class="{ 'is-radio': isRadio }"
      :title="item.label"
      v-model="item.value"
      @change="select(item)"
      >{{ item.label }}</ElCheckbox
    >
  </div>
</template>

<script lang="ts">
import { defineComponent, toRef } from 'vue'
import { Widget } from '@/models'
import useCheckGroup from './useCheckGroup'

/** 单、复选框 填写 */
export default defineComponent({
  name: 'FaCheckGroupFill',
  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props) {
    const data = toRef(props, 'data')

    return useCheckGroup(data)
  }
})
</script>

<style lang="scss">
.fa-check-group-fill {
  max-height: 280px;
  overflow: auto;

  .el-checkbox {
    display: block;
    margin-right: 0;
    overflow: hidden;

    &__label {
      width: calc(100% - 28px);
      vertical-align: middle;
      @include text-ellipsis;
    }
  }
}
</style>
